<template>
  <div class="nav">
    <div class="matterH5">
      <div class="header">
        <div class="left" @click="logoMet">
          <img src="../../assets/common/logo.png" alt="" />
        </div>
        <div class="right" @click="moreMet">
          <img src="../../assets/more.png" alt="" />
        </div>
      </div>

      <van-popup
        v-model="navigationShow"
        position="right"
        :style="{ height: $store.state.clientHeight }"
      >
        <div class="popup">
          <div class="popup-lint"></div>

          <div class="popup-cell">
            <div
              class="list"
              v-for="(item, index) in navigationList"
              :key="index"
              :class="{ 'list-active': index == navigationActive }"
              @click="navigationHit(index, item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      navigationList: this.$store.state.navigationList,
      navigationActive: localStorage.getItem("stateActive"),
      navigationShow: false,
    };
  },
  methods: {
    logoMet() {
      this.$router.push({
        path: "/",
      });
    },
    navigationHit(index, item) {
      this.navigationActive = index;
      this.navigationShow = false;

      this.$router.push({
        path: item.path,
      });
    },
    moreMet() {
      this.navigationShow = !this.navigationShow;
    },
    navbarAppHit(index) {
      this.navigationActive = index;
    },
  },
};
</script>
  
  <style lang="less" scoped>
.nav {
  /deep/ .van-overlay {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .matterH5 {
    .header {
      height: 40px;
      position: fixed;
      top: 0;
      z-index: 99999;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      background: #fff;
      .left {
        width: 30px;
        height: 30px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .right {
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
          height: 20px;
        }
      }
    }

    .popup {
      width: 70vw;
      height: 100%;
      background: #000;
      .popup-lint {
        width: 100%;
        height: 40px;
      }

      .popup-cell {
        padding: 10px 10px 0;
        box-sizing: border-box;
        .list {
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          height: 40px;
          display: flex;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 2px;
          transition: 0.3s;
          letter-spacing: 0.5px;
        }

        .list-active {
          color: #fff;
          background: #276cd3;
        }
      }
    }
  }
}
</style>